<template>
  <div class="index-box d-flex" ref="index">
    <div class="leftBox" :style="{'width': leftTreeShow?'200px':'0px'}">
      <div class="tree-box" v-loading="leftLoading">
        <el-tree :data="treeList" :props="defaultProps" default-expand-all @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
      </div>
    </div>
    <div class="rightBox">
        <div class="table-box" >
          <div class="search" ref="search"></div>
          <div class="actionBtn" ref="actionBtn">
            <div class="actionBtnLeft d-flex align-center">
               <MyLeftTreeRetract :leftTreeShow.sync="leftTreeShow"></MyLeftTreeRetract>
               <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus">添加分类</el-button>
            </div>
            <div class="actionBtnRight">
                <MyRefresh></MyRefresh>
                <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
            </div>
          </div>

          <div class="table" ref="table">
            <el-table :data="dataList" style="width: 100%" :row-key="rowKey" id="crTable"  :height="tableHeight" v-if="!rightLoading"  stripe border  :tree-props="{children: 'children'}">
              <el-table-column prop="name" label="分类名称" v-if="!hideTableColumn.includes('type')" ></el-table-column>
              <el-table-column prop="description" label="规则描述" v-if="rowStatus.dictValue=='points_inc_config'"></el-table-column>
              <el-table-column prop="serviceRate" label="商家服务费" v-if="rowStatus.dictValue=='stores_category'" align="center">
                <template #default="scope">
                  <span >{{scope.row.serviceRate}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="serviceRate" label="等级积分" v-if="rowStatus.dictValue=='points_level_config'" align="center">
                <template #default="scope">
                  <span >{{scope.row.threshold}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="serviceRate" label="赠送积分" v-if="rowStatus.dictValue=='points_inc_config'" align="center">
                <template #default="scope">
                  <span >{{scope.row.pointsInc || '--'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="图片" v-if="!hideTableColumn.includes('img')" align="center">
                <template #default="scope">
                   <el-image :src="scope.row.image" fit="fill" v-image-preview="scope.row.image" class="img" v-if="scope.row.image"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="sortOrder" label="排序" v-if="!hideTableColumn.includes('sortOrder')" align="center"></el-table-column>
              <el-table-column label="展示状态"  v-if="!hideTableColumn.includes('status')" align="center">
                <template #default="scope">
                  <div class="d-flex justify-center"><MySwitch :value.sync="scope.row.status" :id="scope.row.id" text="启用|禁用" textValue="1|2" @changeStatus="handleChangeStatus(scope.row)" :permission="hasBtn('system:classify:state')"></MySwitch></div>

                </template>
              </el-table-column>
              <el-table-column prop="name" label="更新时间" v-if="!hideTableColumn.includes('time')" align="center">
                <template slot-scope="scope">
                  <span v-if="rowStatus.dictValue=='points_level_config' || rowStatus.dictValue=='points_inc_config'">{{ scope.row.updateTime }}</span>
                  <span v-else>{{ parseTime(scope.row.modifyDate) }}</span>

                </template>
              </el-table-column>
              <el-table-column prop="name" label="操作" v-if="!hideTableColumn.includes('active')" :width="rowStatus.dictValue=='stores_category'?'350':'270'" align="center">
                <template #default="scope">
                  <div class="activeBox">
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleEdit(scope.row)"
                      v-has="'system:classify:edit'"
                    >编辑</el-button>
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelt(scope.row)"
                      v-has="'system:classify:del'"
                    >删除</el-button>
                    <el-button
                    v-if="rowStatus.dictValue=='stores_category'"
                      size="medium"
                      type="text"
                      icon="el-icon-s-tools"
                      @click="handleSetStoreMoney(scope.$index, scope.row)"
                    >设置服务费</el-button>
                    <el-button
                      v-if="rowStatus.dictValue=='points_level_config' || rowStatus.dictValue=='points_inc_config'"
                      size="medium"
                      type="text"
                      icon="el-icon-s-tools"
                      @click="handleAddIntegral(scope.$index, scope.row)"
                    >设置积分</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
    </div>
    <!-- /*门店修改服务费*/	 -->
    <el-dialog title="设置服务费" :close-on-click-modal="false" width="600px" v-dialogDrag :visible.sync="storeMoneyVisible" @close="storeMoneyVisible = false">
      <el-form :model="editStoreMoney" label-position="right" :rules="editStoreMoneyRules" ref="editStoreMoney">
        <el-form-item label="分类名称:"  label-width="85px">
          <span>{{editStoreMoneyTitle}}</span>
        </el-form-item>
        <el-form-item label="服务费:" prop="serviceRate" label-width="85px">
          <el-input v-model="editStoreMoney.serviceRate" autocomplete="off"><template slot="append">%</template></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="storeMoneyVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editStoreMoneySubmit('editStoreMoney')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
     <!-- /*门店修改服务费*/	 -->

    <!-- /*新增分类*/	 -->
    <el-dialog :title="dialogTitle" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="addClassifyVisible" @close="addClassifyVisible = false">
      <el-form id="userDialog" :model="addClassifyForm" label-position="right" :rules="addClassifyRules" ref="addClassifyForm">
        <el-form-item label="应用端分类列表" prop="parentId" label-width="125px"  style="width:100%">
           <treeselect v-model="addClassifyForm.parentId" :options="dataList" :normalizer="normalizer" placeholder="选择商品分类" :disabled="dialogTitle=='修改子分类'" />
         </el-form-item>
        <el-form-item label="分类名称" prop="name" label-width="125px"  style="width:100%">
          <el-input v-model="addClassifyForm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="规则描述" prop="remark" label-width="125px" v-if="rowStatus.dictValue=='points_inc_config'"  style="width:100%">
          <el-input v-model="addClassifyForm.remark" autocomplete="off"></el-input>
        </el-form-item>



        <el-form-item label="排序" prop="sortOrder" label-width="125px"  style="width:100%">
          <el-input-number v-model="addClassifyForm.sortOrder"></el-input-number>
        </el-form-item>
        <el-form-item label="图片"  label-width="125px" >
            <MyUpImg :imagePreview='addClassifyForm.image'  @change="imageChange($event,'image')"></MyUpImg>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addClassifyVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addClassifySubmit('addClassifyForm')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitle" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="operatingTypesVisible" @close="operatingTypesVisible = false">
      <el-form id="userDialog" :model="operatingTypesForm" label-position="right" :rules="operatingTypesRules" ref="operatingTypesForm">

        <el-form-item label="分类名称" prop="name" label-width="125px"  style="width:100%">
          <el-input v-model="operatingTypesForm.name " autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="key" prop="typeKey" label-width="125px"  style="width:100%">
          <el-input v-model="operatingTypesForm.typeKey " autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder" label-width="125px"  style="width:100%">
          <el-input-number v-model="operatingTypesForm.sortOrder"></el-input-number>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operatingTypesVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addoperatingTypesSubmit('operatingTypesForm')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /*新增分类*/	 -->

    <!-- 设置积分 -->
    <el-dialog title="设置积分" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="integralVisible" @close="integralVisible = false">
      <el-form id="userDialog" :model="integralForm" label-position="right" :rules="integralRules" ref="integralForm">

        <el-form-item label="分类名称" prop="name" label-width="125px"  style="width:100%">
          <el-input v-model="integralForm.name " autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="serviceRate" label-width="125px"  style="width:100%" v-if="rowStatus.dictValue=='points_level_config'">
          <el-input v-model="integralForm.serviceRate" autocomplete="off" type="number" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="pointsInc" label-width="125px"  style="width:100%" v-if="rowStatus.dictValue=='points_inc_config'">
          <el-input v-model="integralForm.pointsInc" autocomplete="off" type="number" style="width: 150px;" ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-width="125px"  style="width:100%">
          <el-input v-model="integralForm.remark" rows="3" type="textarea"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="integralVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editIntegralSubmit('integralForm')" size="small" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import { categoryList,getCategoryDetails,whetherInvocation,addCategory,deleteCategory,updateCategory,updateLevel,addOperationType } from '@/api/getData';
  import { isCard,isPhone,isEmail } from '../../common/validate.js';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Sortable from 'sortablejs'
  import option from '../../common/option.js';
  var token =  localStorage.getItem('bossAppToken');
  export default {
    components: { Treeselect },
    data() {
      return {
        leftLoading: false,
        rightLoading: false,
        btnLoading: false,
        leftTreeShow:true,
        tableColumn:[{/*自定义表格列*/
            name:'分类名称',
            value:'type'
        },{
            name:'图片',
            value:'img'
        },{
            name:'状态',
            value:'status'
        },{
            name:'排序',
            value:'sortOrder'
        },{
            name:'更新时间',
            value:'time'
        },{
            name:'操作',
            value:'active'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
         treeList: [{
            'dictCode':'',
            'dictLabel':'系统分类管理',
            children: [],
        }],
        classfiyList:[],
        dataList: [],
        rowStatus:'',
        tableHeight:0,//table 高度
        totalCount: 0,
        page: 1,
        limit: 20,
        defaultProps: {
           children: 'children',
           label: 'dictLabel'
        },
        multipleSelection: '',
        dialogTitle: '',
        addClassifyVisible: false,
        addClassifyForm: {
          primaryKeyId:'',
          categoryKey : '',
          name:'',
          parentId:undefined,
          image:'',
          sortOrder:'',
          remark:''
        },
        addClassifyRules: {
          name: [{required: true, message: '分类名称不能为空',trigger: 'change'}],
          sortOrder: [{required: true, message: '排序不能为空',trigger: 'change'}],
          image: [{required: true, message: '请上传图片',trigger: 'change'}],
        },
        rowKey:'',
        storeMoneyVisible:false,
        editStoreMoneyTitle:'',
        editStoreMoney:{
          primaryKeyId:'',
          categoryKey:'',
          serviceRate:'',
        },
        editStoreMoneyRules:{
          serviceRate: [{required: true, message: '手续费不能为空',trigger: 'change'}]
        },

        operatingTypesVisible:false,
        operatingTypesForm:{
          id:'',
          sortOrder:'',
          status:'1',
          typeKey:'',
          name:''
        },
        operatingTypesRules:{
          name: [{required: true, message: '请填写分类名称',trigger: 'change'}],
          typeKey: [{required: true, message: '请填写key',trigger: 'change'}],
          sortOrder: [{required: true, message: '请填写排序',trigger: 'change'}]
        },

        integralVisible:false,
        integralForm:{
          primaryKeyId:'',
          categoryKey : '',
          name:'',
          parentId:undefined,
          image:'',
          sortOrder:'',
          serviceRate:'',
          pointsInc:'',
          remark:''
        },
        integralRules:{
          serviceRate: [{required: true, message: '请填写积分',trigger: 'change'}],
          pointsInc: [{required: true, message: '请填写积分',trigger: 'change'}],
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {

      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - 55;
      });

    },
    methods: {
      imageChange(path, name) {
        this.addClassifyForm[name] = path
      },
       /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node[this.rowKey],
          label: node.name,
          children: node.children
        };
      },
      async dataInfo() {
        try {
          this.leftLoading = true;
          const result = await categoryList({key:'category_management'});
          if (result.code == 200) {
            this.classfiyList = result.data;
            this.treeList[0].children = result.data;
          } else {
            this.$message.error(result.message);
          }
          this.leftLoading = false;
        } catch (err) {
          this.leftLoading = false;
          console.log(err)
        }
      },
      async detailList(){
         try {
           if(this.rowStatus.dictValue=='application_category'){
             this.rowKey = 'appId';
           }else if(this.rowStatus.dictValue=='application_category'){
             this.rowKey = 'typeId';
           }else if(this.rowStatus.dictValue=='product_category'){
             this.rowKey = 'categoryId';
           }else if(this.rowStatus.dictValue=='member_level_category'){
              this.rowKey = 'levelId';
           }else if(this.rowStatus.dictValue=='resource_category'){
              this.rowKey = 'typeId';
           }else if(this.rowStatus.dictValue=='advertising_category'){
             this.rowKey = 'typeId';
           }else if(this.rowStatus.dictValue=='info_category'){
             this.rowKey = 'categoryId';
           }else if(this.rowStatus.dictValue=='stores_category'){
              this.rowKey = 'categoryId';
           }else if(this.rowStatus.dictValue=='post_category'){
              this.rowKey = 'postId';
           }else if(this.rowStatus.dictValue=='tag_category'){
              this.rowKey = 'typeId';
           }else if(this.rowStatus.dictValue=='operation_category'){
              this.rowKey = 'operationId';
           }else if(this.rowStatus.dictValue.indexOf('category_simple_')!='-1'){
              this.rowKey = 'typeId';
           }else if(this.rowStatus.dictValue=='category_coupon'){
              this.rowKey = 'typeId';
            }else if(this.rowStatus.dictValue=='operation_config_type' || this.rowStatus.dictValue=='points_level_config' || this.rowStatus.dictValue=='points_inc_config'){
              this.rowKey = 'id';
            }
            this.rightLoading = true;
            const result = await getCategoryDetails({categoryKey :this.rowStatus.dictValue});
            if (result.code == 200) {
              this.dataList = result.data;
            } else {
              this.$message.error(result.message);
            }
            this.rightLoading = false;
         } catch (err) {

           console.log(err)
         }
      },
      handleSearch() {
        this.page = 1;
        this.dataInfo();
      },
      handleAdd() {
        if(this.rowStatus.dictValue=='operation_config_type'){/*运营配置类型*/
          this.operatingTypesForm.id = '';
          this.operatingTypesForm.sortOrder = '';
          this.operatingTypesForm.status = '';
          this.operatingTypesForm.typeKey = '';
          this.operatingTypesForm.name = '';
          this.dialogTitle = '添加主分类';
          this.operatingTypesVisible = true;
        }else{
          this.addClassifyForm.primaryKeyId = '';
          this.addClassifyForm.name = '';
          this.addClassifyForm.parentId = undefined;
          this.addClassifyForm.categoryKey = this.rowStatus.dictValue;
          this.addClassifyForm.sortOrder = '';
          this.addClassifyForm.remark = '';
          this.dialogTitle = '添加主分类';
          this.resetForm('addClassifyForm');
          this.addClassifyVisible = true;
        }

      },
      handleAddChild(index,row) {
        this.addClassifyVisible = true;
        this.addClassifyForm.categoryKey  = this.rowStatus.dictCode;
        this.addClassifyForm.typeName = row.name;
        this.addClassifyForm.sortOrder = row.sortOrder;
        this.dialogTitle = '添加子分类';
      },
      getIdFn(row){
        let id;
        let typeArr = ['application_category','resource_category','advertising_category','tag_category','category_simple_','category_coupon']
        if(typeArr.indexOf(this.rowStatus.dictValue)!='-1'){
          id = row.typeId;
        }else if(this.rowStatus.dictValue=='application_category'){
          id = row.appId;
        }else if(this.rowStatus.dictValue=='product_category'){
          id = row.categoryId;
        }else if(this.rowStatus.dictValue=='member_level_category'){
          id = row.levelId;
        }else if(this.rowStatus.dictValue=='info_category'){
          id = row.categoryId;
        }else if(this.rowStatus.dictValue=='stores_category'){
          id = row.categoryId;
        }else if(this.rowStatus.dictValue=='post_category'){
          id = row.postId;
        }else if(this.rowStatus.dictValue=='operation_category'){
          id = row.operationId;
        }else if(this.rowStatus.dictValue=='operation_config_type' || this.rowStatus.dictValue=='points_level_config' || this.rowStatus.dictValue=='points_inc_config'){
          id = row.id;
        }else if(this.rowStatus.dictValue.indexOf('category_simple_')!='-1'){
          id = row.typeId;
        }
        return id;
      },
      handleEdit(row) {
        if(this.rowStatus.dictValue=='operation_config_type'){/*运营配置类型*/
          this.operatingTypesForm.id = row.id;
          this.operatingTypesForm.sortOrder = row.sortOrder;
          this.operatingTypesForm.status = row.status;
          this.operatingTypesForm.typeKey = row.typeKey;
          this.operatingTypesForm.name = row.name;
          this.dialogTitle = '修改子分类';
          this.operatingTypesVisible = true;
        }else{
          this.dialogTitle = '修改子分类';
          let id = this.getIdFn(row);
          this.addClassifyForm.primaryKeyId = id;
          this.addClassifyForm.categoryKey   = this.rowStatus.dictValue;
          this.addClassifyForm.name = row.name;
          this.addClassifyForm.sortOrder = row.sortOrder;
          this.addClassifyForm.image = row.image;
          this.addClassifyForm.parentId = id;
          this.addClassifyForm.remark = row.description;
          if(row.pointsInc){
             this.addClassifyForm.pointsInc = row.pointsInc;
          }
          this.addClassifyVisible = true;
        }

      },
      handleNodeClick(data){/*树节点点击事件*/
        if(data.dictCode){
            this.rowStatus = data;
            this.detailList();
        }
      },
      handleSetStoreMoney(index,row){
          let id = this.getIdFn(row);
          this.editStoreMoney.primaryKeyId = id;
          this.editStoreMoney.categoryKey   = this.rowStatus.dictValue;
          this.editStoreMoneyTitle = row.name;
          this.editStoreMoney.serviceRate = row.serviceRate;
          this.storeMoneyVisible = true;
      },
      editStoreMoneySubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            updateCategory(this.editStoreMoney).then((result) => {
             if (result.code == 200) {
               this.$message.success(result.msg);
               this.storeMoneyVisible = false;
               this.detailList();
             } else {
               this.$message.error(result.msg);
             }
             this.btnLoading = false;
           });

          }
        })
      },
      addClassifySubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            if(this.dialogTitle=='修改子分类'){
              let data = JSON.parse(JSON.stringify(this.addClassifyForm));
              data.parentId =  data.parentId?data.parentId:'0';
              updateCategory(data).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.addClassifyVisible = false;
                  this.detailList();
                } else {
                  this.$message.error(result.msg);
                }
                this.btnLoading = false;
              });
            }else{
              let data = JSON.parse(JSON.stringify(this.addClassifyForm));
              data.parentId =  data.parentId?data.parentId:'0';
              addCategory(data).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.addClassifyVisible = false;
                  this.detailList();
                } else {
                  this.$message.error(result.msg);
                }
                this.btnLoading = false;
              });
            }

          }
        })
      },
      handleAddIntegral(index,row){/* 设置积分按钮 */

        let id = this.getIdFn(row);
        this.integralForm.primaryKeyId = id;
        this.integralForm.categoryKey   = this.rowStatus.dictValue;
        this.integralForm.name = row.name;
        this.integralForm.sortOrder = row.sortOrder;
        this.integralForm.image = row.image;
        this.integralForm.parentId = id;
        this.integralForm.serviceRate = row.threshold;
        this.integralForm.pointsInc = row.pointsInc;
        this.integralForm.remark = row.remark;
        this.integralVisible = true;
      },
      editIntegralSubmit(formName){ /* 设置积分保存按钮 */
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            updateCategory(this.integralForm).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.integralVisible = false;
                this.detailList();
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      addoperatingTypesSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            addOperationType(this.operatingTypesForm).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.operatingTypesVisible = false;
                this.detailList();
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      async handleChangeStatus(row) {
        try {
          let id = this.getIdFn(row);
          let data = {
            id: id,
            status: row.status,
            categoryKey:this.rowStatus.dictValue
          }
          const result = await whetherInvocation(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.status = !row.status;
          }
        } catch (err) {
          console.log(err)
        }
      },

      handleDelt(row) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = this.getIdFn(row);
          console.log(this.rowStatus.dictValu,id)
          deleteCategory({
            categoryKey: this.rowStatus.dictValue,
            primaryKeyId:id
          }).then((result) => {
            if (result.code == 200) {
              this.detailList();
              this.$message.success(result.msg);
            } else {
              this.$message.error(result.msg);
            }
          });
        }).catch(() => {
        });
      },

    }
  }
</script>

<style scoped lang="scss">
  .icon{
    font-size: 24px;
    color: #3A7654;
    margin-right:10px;
    cursor: pointer;
  }
  .index-box{
    padding:0px!important;
    margin-left:0px;
  }
  .tree-box /deep/ .el-tree-node{
     background: #D8E4DD;
  }
  .tree-box> /deep/ .el-tree>.el-tree-node{
    padding:10px;
  }
  .tree-box> /deep/ .el-tree .is-current{
    background:#fff;
  }
  .table-box{
    padding:15px
  }
</style>
